<template>
  <div class="header">
    <div>
      <p class="Data">{{ date }}<br />工业视觉-安全生成-1号车间</p>
    </div>

    <div style="display: flex; position: relative">
      <a-dropdown :trigger="['click', 'hover']" style="">
        <a
          class="R_title"
          :class="{ active: isActive0 }"
          style="position: relative; left: 40px"
          @click="changeMenu('工业视觉', 0)"
        >
          <!--  :class="{ active: activeStatus }" @click="activeStatus = !activeStatus" -->
          工业视觉
        </a>
        <!-- <a-menu slot="overlay" class="R_item" @click="changeMenu">
          <a-menu-item key="安全生产"> 安全生产 </a-menu-item>
          <a-menu-item key="监控系统"> 监控系统 </a-menu-item>
          <a-menu-item> </a-menu-item>
        </a-menu>  --> </a-dropdown
      ><a-dropdown :trigger="['click', 'hover']">
        <a
          class="R_title"
          :class="{ active: isActive1 }"
          style="position: relative; left: 25px"
          @click="changeMenu('智慧园区', 1)"
        >
          智慧园区
        </a>
        <!-- <a-menu slot="overlay" class="R_item" @click="changeMenu">
          <a-menu-item key="园区管理"> 园区管理 </a-menu-item>
          <a-menu-item> </a-menu-item>
          <a-menu-item> </a-menu-item>
        </a-menu> -->
      </a-dropdown>
      <div class="M_title">
        <img
          src="..\assets\image\顶部导航-装饰-左.png"
          style="margin: 0 40px 20px 60px"
        /><span>数字产业大脑</span>
        <img
          src="..\assets\image\顶部导航-装饰-右.png"
          style="margin: 0 60px 20px 40px"
        />
      </div>
      <a-dropdown :trigger="['click']">
        <a
          class="L_title"
          :class="{ active: isActive2 }"
          style="position: relative; right: 25px"
          @click="changeMenu('产业数据', 2)"
        >
          产业数据
        </a> </a-dropdown
      ><a-dropdown :trigger="['click', 'hover']">
        <a
          class="L_title"
          :class="{ active: isActive3 }"
          style="position: relative; right: 40px"
          @click="changeMenu('5G安防', 3)"
        >
          5G安防
        </a>
      </a-dropdown>
    </div>
    <div
      style="
        display: flex;
        color: #ffffff;
        margin-top: 20px;
        font-size: 16px;
        margin-right: 20px;
      "
    >
      <a-badge dot>
        <a-icon type="alert" style="font-size: 20px" />
      </a-badge>
      <p style="margin: 0 15px">欢迎回来 ! 管理员</p>
      <a-dropdown placement="bottomCenter">
        <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
          <a-icon type="user" style="font-size: 25px; color: #fff" />
        </a>
        <a-menu slot="overlay" class="menu">
          <a-menu-item class="menuitem"> 查看账单 </a-menu-item>
          <a-menu-item class="menuitem"> 报警信息 </a-menu-item>
          <a-menu-item class="menuitem"> 退出登录 </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: "",
      nowActive: 0,
      isActive0: true,
      isActive1: false,
      isActive2: false,
      isActive3: false,
    };
  },
  methods: {
    changeMenu(e, num) {
      this.$emit("headerPath", e);
      if (num == 0) {
        this.isActive0 = true;
        this.isActive1 = false;
        this.isActive2 = false;
        this.isActive3 = false;
      } else if (num == 1) {
        this.isActive1 = true;
        this.isActive0 = false;
        this.isActive2 = false;
        this.isActive3 = false;
      } else if (num == 2) {
        this.isActive2 = true;
        this.isActive0 = false;
        this.isActive1 = false;
        this.isActive3 = false;
      } else if (num == 3) {
        this.isActive3 = true;
        this.isActive0 = false;
        this.isActive1 = false;
        this.isActive2 = false;
      }
      console.log(this.isActive3);
    },
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      let hh =
        new Date(timeStamp).getHours() < 10
          ? "0" + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours();
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? "0" + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes();
      let week = new Date(timeStamp).getDay();
      let weeks = ["日", "一", "二", "三", "四", "五", "六"];
      let getWeek = "星期" + weeks[week];
      let wu = new Date(timeStamp).getHours() < 12 ? "上午" : "下午";
      this.date =
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        getWeek +
        "  " +
        wu +
        "  " +
        hh +
        ":" +
        mm;
    },
  },
  mounted() {
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    _this.timeFormate(new Date());
    this.timer = setInterval(() => {
      _this.timeFormate(new Date()); // 修改数据date
    }, 6000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
};
</script>

<style  scoped>
.M_title {
  background-image: url(../assets/image/顶部导航-中间图片.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 74px;
  width: 628px;
}
.M_title span {
  font-size: 40px;
  background: linear-gradient(to bottom, #1dd8ec, #155db5);
  font-weight: bold;
  background-clip: text;
  color: transparent;
}
.R_title {
  background-image: url(../assets/image/顶部导航-按钮-图片.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 26px;
  height: 56px;
  width: 202px;
  text-align: center;
  line-height: 50px;
  margin-top: 10px;
  color: #1af7ff;
}
.active {
  color: #ffffff !important;
}
.R_title:visited {
  color: #ffffff;
}
.L_title {
  background-image: url(../assets/image/顶部导航-按钮右-图片.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 26px;
  height: 56px;
  width: 202px;
  text-align: center;
  line-height: 50px;
  margin-top: 10px;
  color: #1af7ff;
}
.header {
  width: 100%;
  margin: 1px;
  display: flex;
  justify-content: space-between;
}
.R_item {
  background-image: url("../assets/image/下拉框1.png");
  background-repeat: no-repeat;
  background-size: 116px 125px;
  text-align: center;
  background-color: transparent !important;
  width: 77%;
  margin-left: 46px;
  margin-top: -11px !important;
  border-radius: 0px;
  float: right;
}
.ant-dropdown-menu-item {
  color: #0a163b !important;
  margin-top: 0;
  padding: 20px 16px;
  font-size: 16px;
  line-height: 0px;
  padding-left: 28px;
  text-align: left;
}
.ant-dropdown-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.6) !important;
  width: 74%;
}
.ant-dropdown-menu-item:active {
  background-color: rgba(255, 255, 255, 0.6);
  width: 74%;
}
.Data {
  text-align: left;
  margin-top: 10px;
  color: #ffffff;
  font-size: 16px;
}
.menuitem {
  color: #fff !important;
  width: 100%;
  padding-left: 25px;
}
.menu {
  background-color: #142766 !important;
  margin-top: -30px !important;
}
</style>
